class Game
{
    constructor(elm)
    {
        this.elm = document.querySelector(elm)
        this.benObj = document.querySelector('.ben')
        this.startObj = document.querySelector('.start')
        this.stopObj = document.querySelector('.stop')
        //地图
        this.map = new Map(elm)
        //食物
        this.food = new Food(elm)
        // 蛇节长度
        this.len = 20
        // 存蛇
        this.snakeObj = [
            { x: 3, y :2, color:'#CB4341', ele:null},  //蛇头
            { x: 2, y :2, color:'gray', ele:null}, // 蛇的身体
            { x: 1, y :2, color:'gray', ele:null}  // 蛇的身体
        ]
        this.direction = 'right'
        this.t = null
        this.init()
    }

    init(){
        this.openStart()
        this.openStop()
        // this.restart()
    }
    snake(){
        this.remove()
        for(let i = 0;i<this.snakeObj.length;i++){
            let divObj = document.createElement('div')

            divObj.style.width = `${this.len}px`
            divObj.style.height = `${this.len}px`
            divObj.style.position = `absolute`
            divObj.style.left =  this.snakeObj[i].x*this.len+'px'
            divObj.style.top =  this.snakeObj[i].y *this.len+'px'
            divObj.style.background = this.snakeObj[i].color
            
            this.snakeObj[i].ele = divObj
            this.elm.appendChild(divObj)
        }
    }
    move(){
        for(let i = this.snakeObj.length - 1; i>0; i--){
            this.snakeObj[i].x = this.snakeObj[i-1].x
            this.snakeObj[i].y = this.snakeObj[i-1].y

            if(this.snakeObj[i].x == -1|| this.snakeObj[i].x == 50) this.stop()
            if(this.snakeObj[i].y == -1 || this.snakeObj[i].y == 30) this.stop()
        }

        switch (this.direction){
            case`top`:
                this.snakeObj[0].y -= 1
                break;
            case`bottom`:
                this.snakeObj[0].y += 1
                break;
            case`left`:
                this.snakeObj[0].x -= 1
                break;
            case`right`:
                this.snakeObj[0].x += 1
                break;
        }
        this.snake()
    }
    remove(evt){
        for(let i = 0;i<this.snakeObj.length;i++){
            if (this.snakeObj[i].ele)this.snakeObj[i].ele.remove() 
        }
    }
    start(){

        this.t = setInterval(()=>{
            this.move()

            let snakeX = this.snakeObj[0].x * 20
            let snakeY = this.snakeObj[0].y * 20
            let foodX = this.food.foodX
            let foodY = this.food.foodY

            if(snakeX == foodX && snakeY == foodY){
                let last = this.snakeObj[this.snakeObj.length-1]

                this.snakeObj.push({
                    x: last.x,
                    y: last.y,
                    color:last.color,
                    ele:null
                })

                this.snake()
                this.food.move()
            }
            
        }, 60)

        document.body.addEventListener('keydown',(evt)=>{
            let e = evt || window.event

            if(e.key =='ArrowUp') this.direction = 'top'
            if(e.key =='ArrowDown') this.direction = 'bottom'
            if(e.key =='ArrowLeft') this.direction = 'left'
            if(e.key =='ArrowRight') this.direction = 'right'
         
        })
    }
    stop(){
        this.len = 0
        this.benObj.style.display = 'block'
        clearInterval(this.t) 
    }
 
    openStart(){
        this.startObj.onclick = ()=> {
            if (this.t) clearInterval(this.t)
            this.len = 20
            this.start()
            this.benObj.style.display = 'none'
        }
    }
    openStop(){
        this.stopObj.onclick = ()=> this.stop()
    }

}
export default Game
import Map from "./map.js"
import Food from "./food.js"
